<template>
	<view>
		<view class="video_play">
			<!-- 背景图片 -->
			<image :src="video.img" mode="apsectFix"></image>
			<!-- 工具 -->
			<view class="video_tool">
				<view @click="handleMuted" :class="['iconfont',muted?'icon-icon_A':'icon-liuyan']"></view>
				<view class="iconfont icon-share3">
					<button open-type="share"></button>
				</view>
			</view>
			<!-- 视频 -->
			<view class="video_wrap">
				<video :muted="muted" :src="video.video" objectFit="fill"></video>
			</view>
			<!-- 下载按钮 -->
			<view class="download">
				<view class="download_btn" @click="handleDownLoad">下载高清</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				video: [],
				muted: false //是否静音
			}
		},
		onLoad() {
			this.video = getApp().globalData.video
			console.log(this.video)
		},
		methods: {
			//开关声音
			handleMuted(){
				this.muted = !this.muted;
			},
			// 下载视频
			async handleDownLoad(){
				await uni.showLoading({
					title:'下载中',
					
				})
				//下载到内存中
				const res = await uni.downloadFile({
					url: this.video.video
				})
				const {tempFilePath} = res[1];
				//下载到本地
				const res2 = await uni.saveVideoToPhotosAlbum({
					filePath: tempFilePath
				})
				console.log(res2)
				uni.hideLoading()
				if(res2.length === 2){
					uni.showToast({
						title: '下载成功',
						
					})
				}else {
					uni.showToast({
						title: '下载失败',
						icon: "none"
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.video_play {
	position: relative;
	image {
		position: absolute;
		width: 100vw;
		height: 100vh;
		z-index: -1;
		//css3 滤镜
		filter: blur(20px);
	}
	.video_wrap{
		display: flex;
		justify-content: center;
		video {
			width: 360rpx;
			height: 600rpx;
		}
		
		
	}
	.video_tool {
		height: 70rpx;
		display: flex;
		justify-content: flex-end;
		padding: 10rpx 0;
		.iconfont {
			width: 70rpx;
			color: #FFFDEF;
			font-size: 40rpx;
			border-radius: 50%;
			background-color: rgba(0,0,0,0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			button {
				position: absolute;
				width: 100%;
				height: 100%;
				opacity: 0;
			}
		}
	}
	.download {
		display: flex;
		justify-content: center;
		padding-top: 30rpx;
		.download_btn {
			width: 360rpx;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFDEF;
			border: 3rpx solid #FFFDEF;
			background-color: rgba(0,0,0,0.3);
		}
	}
}
</style>
